<template>
  <section class="my-vacation">
    <h2 class='title'>我的休假</h2>
    <div class="detail">
      <ul v-if='list.length'>
        <li v-for='(k,i) in list' @click.stop='handleDialog(k.busi_id)'>
          <h3>
            <i></i>
            <span>{{k.leave_name}}</span>
            <span>共{{k.leave_day}}天</span>
            <span class="date">{{k.start_time}}&nbsp;至&nbsp;{{k.end_time}}</span>
            <span></span>
          </h3>
          
          <div class="status" :class='handleColor(k.auditStatus)'>{{k.auditStatus}}</div>
          <p>{{k.leave_reason}}</p>
        </li>
      </ul>
      <p class='imgBox' v-else>
         <img src="../../../../../static/images/no_data.jpg" alt="">
      </p>
    </div>

    <div class="fenye">
      <el-pagination v-if='list.length' @current-change="handleCurrentChange" :current-page.sync="page.pageNum"  :page-size='page.pageSize'  layout="prev, pager, next" :total="page.total">

      </el-pagination>
    </div>
    <p></p>

    <v-dialog 
      :dialogVisible.sync='dialogVisible'
      :id.sync='id'
    ></v-dialog>

   
  </section>

</template>

<script>
import Vue from 'vue';

import { Pagination } from 'element-ui';
import VDialog from '@/components/router-component/homepage2/myVacation/leave_detail_dialog'
Vue.use(Pagination);
export default {
  components:{
    VDialog
  },
  data() {
    return {
      list: [],
      dialogVisible:false,
      id:'',
      page: {
        pageNum: 1,
        pageSize: 8,
        total: 0
      }
    };
  },

  mounted() {
    this.getLitData();
  },
  methods: {
    handleDialog(id) {
        this.id = id;
        setTimeout(() => {
          
          this.dialogVisible = true
        }, 222);
    },
    getLitData(promiseFlag = false) {
      const params = {
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      };

      this.Axios.Post(this.URL.myleaveByrecord.url, params).then(res => {
        const promise = () => {
          return new Promise((reslove, reject) => {
            const data = res.data.datas
            this.list = data
            this.page.pageNum = res.data.page.pageNum
            this.page.pageSize = res.data.page.pageSize
            this.page.total = res.data.page.total
            reslove()
          })
        }

        promise().then(() => {
          if (promiseFlag) window.scrollTo(0, document.body.scrollHeight)
        })
      })
    },
    handleCurrentChange(val) {
      this.page.pageNum = val;
      this.getLitData(true);
    },
    handleColor(status) {
      switch (status) {
        case '已备案':
          return 'green';
          break;

        case '已通过':
          return 'green';
          break;

        case '审批中':
          return 'blue';
          break;

        case '已拒绝':
          return 'red';
          break;

        case '已驳回':
          return 'red';
          break;

        default:
          return 'blue';
          break;
      }
    }
  }
};
</script>

<style scoped lang='less'>
.my-vacation {
  position: relative;
  & > p {
    position: absolute;
    left: 0;
    bottom:0px;
    width: 100%;
    background-color:#ecf0f5;
    height:20px;
  }
  .title {
    text-align: center;
    font-size: 15px;
    padding-top: 20px;
  }
  .detail {
    width: 95%;
    margin: 0 auto;

    ul {
      overflow: hidden;
      padding-bottom: 25px;
      li:nth-of-type(2n + 1) {
        float: left;
      }

      li:nth-of-type(2n) {
        float: right;
      }

      li {
        background: #f5f5f7;
        width: 49%;
        border-radius: 6px;
        margin-top: 20px;
        padding: 20px 20px 25px 35px;
        position: relative;
        height: 105px;
        cursor: pointer;
        p {
          overflow: hidden;
          padding-top: 15px;
          color: #606266;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        h3 {
          font-size: 14px;
          position: relative;
          i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #268ef5;
            position: absolute;
            left: -20px;
            top: 50%;
            margin-top: -4px;
          }
          span {
            margin-right: 10px;
          }
          .date {
            color: #8391a5;
            font-size: 13px;
            font-weight: normal;
          }
        }
        .status {
          position: absolute;
          right: 20px;
          top: 15px;
          color: #fff;
          border-radius: 6px;
          padding: 4px 8px;
          font-size: 13px;
        }
        .status.green {
          background-color: #58cf28;
        }

        .status.blue {
          background-color: #268ef5;
        }

        .status.red {
          background-color: #d12c21;
        }
      }
    }

    .imgBox {
      text-align:center;
      img {
        margin:30px auto 0 auto;
      }
    }
  }

  .fenye {
    text-align: center;
    padding-bottom: 40px;
  }
}
</style>
